<script lang="ts" setup>
import type { TabPaneName } from 'element-plus';

import { inject, onBeforeMount, onMounted, ref, watch } from 'vue';

import { FluentDrawImage20Regular, PajamasLabels } from '@vben/icons';
import { cloneDeep } from '@vben/utils';

import {
  ElCascader,
  ElIcon,
  ElMessage,
  ElOption,
  ElRow,
  ElSelect,
  ElTabPane,
  ElTabs,
} from 'element-plus';

import { useSceneStore } from '#/store';

import {
  BarChartRenderPanel,
  ClusterRenderPanel,
  GradualValueRenderPanel,
  HeatmapRenderPanel,
  HierarchicalRenderPanel,
  IconLabelPanel,
  ImageRasterRenderPanel,
  MultiBandRasterRenderPanel,
  ODRenderPanel,
  PieChartRenderPanel,
  SingleBandRasterRenderPanel,
  SingleValueRenderPanel,
  TextLabelPanel,
  TimeAnimationPanel,
  UniqueValueRenderPanel,
} from './mapping-panel';

const emit = defineEmits(['changeTab', 'changeRenderType', 'unAvalibleCBtn']);
const selectedLayer = inject('currentSelectedLayer') as any;
const currentTab = ref(
  selectedLayer.value.organizationType === 'singleLayer' ? '符号化' : '动画',
);
const currentSource = ref({} as any);
const value = ref(['BasicMapping', 'singleValueRender']);
defineExpose({ value });
const labelType = ref('textLabel');
const animationType = ref('timeAnimation');
const sceneStore = useSceneStore();

const options = ref([
  {
    value: 'BasicMapping',
    label: '基础制图模板',
    disabled: true,
    children: [
      {
        value: 'singleValueRender',
        label: '单一值',
      },
      {
        value: 'uniqueValueRender',
        label: '唯一值',
      },
      {
        value: 'hierarchicalRender',
        label: '等级',
      },
      {
        value: 'gradualValueRender',
        label: '渐变',
      },
    ],
  },
  {
    value: 'StyleMapping',
    label: '风格制图模板',
    disabled: true,
    children: [
      {
        value: 'heatMap',
        label: '热力图',
      },
      {
        value: 'cluster',
        label: '聚合图',
      },
      {
        value: 'OD',
        label: 'OD流线',
        disabled: true,
      },
      // {
      //   value: 'H3Cluster',
      //   label: '蜂窝图',
      //   disabled: true
      // },
    ],
  },
  {
    value: 'ChartMapping',
    label: '图表制图模板',
    disabled: true,
    children: [
      {
        value: 'pie',
        label: '饼图',
      },
      {
        value: 'bar',
        label: '柱状图',
      },
      // {
      //   value: 'line',
      //   label: '折线图',
      // },
    ],
  },
  {
    value: 'RasterMapping',
    label: '栅格制图模板',
    disabled: true,
    children: [
      {
        value: 'imageRasterRender',
        label: '图片栅格',
      },
      {
        value: 'singleBandRasterRender',
        label: '波段着色',
      },
      {
        value: 'multiBandRasterRender',
        label: '假彩色合成',
      },
    ],
  },
]);
const labelOptions = ref([
  {
    id: 1,
    value: 'textLabel',
    label: '字体标注',
    disabled: true,
  },
  {
    id: 2,
    value: 'iconLabel',
    label: '图标标注',
    disabled: true,
  },
]);
const animationOptions = ref([
  {
    id: 1,
    value: 'timeAnimation',
    label: '时序动画',
    disabled: true,
  },
  // {
  //   id: 2,
  //   value: 'trackAnimation',
  //   label: '轨迹动画',
  //   disabled: true,
  // },
]);
const props = {
  expandTrigger: 'hover' as const,
};
const handleTabChange = (tab: TabPaneName) => {
  emit('changeTab', tab);
};
const confirmBtnAvalible = (val: any) => {
  emit('unAvalibleCBtn', val);
};
// const handleSelectChange = (val: any) => {
//   if(val[1] === 'heatMap' || val[1] === 'OD'){
//     console.log(val)
//   }
// }
const handleValueChange = (val: any) => {
  if (val[0] === 'StyleMapping') {
    if (
      currentSource.value.geoType !== 'POINT' &&
      currentSource.value.geoType !== 'MULTIPOINT'
    ) {
      ElMessage.error('风格制图只支持基于geojson源的点图层!');
      // value.value = ['BasicMapping', 'singleValueRender']
      value.value = cloneDeep(selectedLayer.value.renderType);
    }
    // else {
    //   if (val[1] === 'cluster') {
    //     if (!currentSource.value.isCluster) {
    //       ElMessage.error('当前图层数据源未开启聚合属性，暂不支持聚合图渲染!')
    //       value.value = ['BasicMapping', 'singleValueRender']
    //     }
    //   }
    // }
    if (
      selectedLayer.value.renderType[0] === 'StyleMapping' &&
      val[1] !== selectedLayer.value.renderType[1]
    ) {
      ElMessage.error('当前图层渲染类型不支持更改!');
      value.value = cloneDeep(selectedLayer.value.renderType);
    }
    return;
  }
  if (
    val[0] === 'ChartMapping' &&
    (currentSource.value.geoType === 'LINESTRING' ||
      currentSource.value.geoType === 'MULTILINESTRING')
  ) {
    ElMessage.error('不支持对线图层添加图表!');
    value.value = cloneDeep(selectedLayer.value.renderType);
  }
};
const getSourceType = () => {
  sceneStore.currentSceneConfig.sources.forEach((item: any) => {
    if (item.sourceId === selectedLayer.value.source) {
      currentSource.value = item;
    }
  });
};
watch(
  currentTab,
  () => {
    if (currentTab.value === '符号化') {
      watch(
        value,
        () => {
          emit('changeRenderType', value.value[1]);
        },
        {
          immediate: true,
        },
      );
    } else if (currentTab.value === '标注') {
      watch(
        labelType,
        () => {
          // console.log(value.value)
          emit('changeRenderType', labelType.value);
        },
        {
          immediate: true,
        },
      );
    } else {
      watch(
        animationType,
        () => {
          emit('changeRenderType', animationType.value);
        },
        {
          immediate: true,
        },
      );
    }
  },
  {
    immediate: true,
  },
);
onBeforeMount(() => {
  getSourceType();
  // value.value = currentSource.value.sourceType === 'geojson' ? ['StyleMapping', 'heatMap'] : ['BasicMapping', 'singleValueRender']
  value.value =
    selectedLayer.value.templateRenderType ?? selectedLayer.value.renderType; // 防止切换渲染模板但未应用时，重新渲染该组件导致渲染类型恢复成默认值
  delete selectedLayer.value.templateRenderType;
});
onMounted(() => {
  if (selectedLayer.value.organizationType === 'singleLayer') {
    const isVectorOrGeojson =
      currentSource.value.sourceType === 'vector' ||
      currentSource.value.sourceType === 'geojson';
    options.value[0]!.disabled = !isVectorOrGeojson;
    options.value[1]!.disabled = !(
      currentSource.value.sourceType === 'geojson'
    );
    options.value[2]!.disabled = !(currentSource.value.sourceType === 'vector');
    options.value[3]!.disabled = !(currentSource.value.sourceType === 'image');
    if (selectedLayer.value.renderType[0] === 'StyleMapping') {
      options.value[0]!.disabled = true;
    }
  }
});
</script>
<template>
  <div>
    <ElTabs
      v-model="currentTab"
      tab-position="left"
      style="height: 200px"
      class="demo-tabs"
      @tab-change="handleTabChange"
      :key="currentTab"
    >
      <template v-if="selectedLayer.organizationType === 'singleLayer'">
        <ElTabPane name="符号化" lazy>
          <template #label>
            <span class="custom-tabs-label">
              <ElIcon size="18">
                <FluentDrawImage20Regular />
              </ElIcon>
              <span>符号</span>
            </span>
          </template>
          <ElRow class="single-col">
            <!-- <el-select size="default" v-model="value" placeholder="请选择符号化方式">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select> -->
            <ElCascader
              size="default"
              v-model="value"
              :options="options"
              :props="props"
              @change="handleValueChange"
            >
              <template #default="{ node, data }">
                <span>{{ data.label }}</span>
                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
              </template>
            </ElCascader>
          </ElRow>
          <ElRow v-if="value[1] === 'singleValueRender'" class="single-col">
            <SingleValueRenderPanel />
          </ElRow>
          <ElRow v-if="value[1] === 'uniqueValueRender'" class="single-col">
            <UniqueValueRenderPanel />
          </ElRow>
          <ElRow v-if="value[1] === 'hierarchicalRender'" class="single-col">
            <HierarchicalRenderPanel />
          </ElRow>
          <ElRow v-if="value[1] === 'gradualValueRender'" class="single-col">
            <GradualValueRenderPanel />
          </ElRow>
          <ElRow v-if="value[1] === 'heatMap'" class="single-col">
            <HeatmapRenderPanel @confirm-btn-avalible="confirmBtnAvalible" />
          </ElRow>
          <ElRow v-if="value[1] === 'cluster'" class="single-col">
            <ClusterRenderPanel @confirm-btn-avalible="confirmBtnAvalible" />
          </ElRow>
          <ElRow v-if="value[1] === 'OD'" class="single-col">
            <ODRenderPanel />
          </ElRow>
          <!-- <ElRow v-if="value[1] === 'H3Cluster'" class="single-col">
            <H3ClusterRenderPanel />
          </ElRow> -->
          <ElRow v-if="value[1] === 'pie'" class="single-col">
            <PieChartRenderPanel />
          </ElRow>
          <ElRow v-if="value[1] === 'bar'" class="single-col">
            <BarChartRenderPanel />
          </ElRow>
          <ElRow v-if="value[1] === 'imageRasterRender'" class="single-col">
            <ImageRasterRenderPanel />
          </ElRow>
          <ElRow
            v-if="value[1] === 'singleBandRasterRender'"
            class="single-col"
          >
            <SingleBandRasterRenderPanel />
          </ElRow>
          <ElRow v-if="value[1] === 'multiBandRasterRender'" class="single-col">
            <MultiBandRasterRenderPanel />
          </ElRow>
        </ElTabPane>

        <ElTabPane
          name="标注"
          lazy
          v-if="selectedLayer.renderType[0] === 'BasicMapping'"
        >
          <template #label>
            <span class="custom-tabs-label">
              <ElIcon size="15">
                <PajamasLabels />
              </ElIcon>
              <span>标注</span>
            </span>
          </template>
          <ElRow class="single-col">
            <ElSelect
              size="default"
              v-model="labelType"
              placeholder="请选择标注类型"
              style="width: 100%; height: 100%"
            >
              <ElOption
                v-for="typeItem in labelOptions"
                :key="typeItem.id"
                :label="typeItem.label"
                :value="typeItem.value"
              />
            </ElSelect>
          </ElRow>
          <ElRow v-if="labelType === 'textLabel'" class="single-col">
            <TextLabelPanel @confirm-btn-avalible="confirmBtnAvalible" />
          </ElRow>
          <ElRow v-if="labelType === 'iconLabel'" class="single-col">
            <IconLabelPanel @confirm-btn-avalible="confirmBtnAvalible" />
          </ElRow>
        </ElTabPane>
      </template>
      <template v-else>
        <ElTabPane name="动画">
          <template #label>
            <span class="custom-tabs-label">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shujubiaozhu" />
                >&nbsp;
                <span>动画</span>
              </svg>
            </span>
          </template>
          <ElRow class="single-col">
            <ElSelect
              size="default"
              v-model="animationType"
              placeholder="请选择动画类型"
              style="width: 100%; height: 100%"
            >
              <ElOption
                v-for="typeItem in animationOptions"
                :key="typeItem.id"
                :label="typeItem.label"
                :value="typeItem.value"
              />
            </ElSelect>
          </ElRow>
          <ElRow v-if="animationType === 'timeAnimation'" class="single-col">
            <TimeAnimationPanel @confirm-btn-avalible="confirmBtnAvalible" />
          </ElRow>
        </ElTabPane>
      </template>

      <!-- <el-tab-pane name="字段">
        <template #label>
          <span class="custom-tabs-label">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-ziduan"></use>
            </svg>&nbsp;
            <span>字段</span>
          </span>
        </template>
      </el-tab-pane> -->
    </ElTabs>
  </div>
</template>
<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  font-size: 32px;
  font-weight: 600;
  color: #6b778c;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}

:deep(.el-tabs) {
  height: auto !important;
}

/* :deep(.el-tabs__nav-scroll) {
  background-color: aliceblue;
} */

.icon {
  width: 1em;
  height: 1em;
  overflow: hidden;
  vertical-align: -0.15em;
  fill: currentcolor;
}

.single-col {
  width: 100%;
  padding: 10px;
  padding-bottom: 0;
}

.el-select {
  width: 100%;
  font-size: 15px;
}

:deep(.el-cascader) {
  width: 100%;
  font-size: 15px;
}

.custom-tabs-label {
  .el-icon {
    vertical-align: middle;
  }

  span {
    margin-left: 4px;
    vertical-align: middle;
  }
}
</style>
